import { getOption1 } from "../../options/options1";
import { getOption2 } from "../../options/options2";
import { getOption3 } from "../../options/options3";
import { getOption4 } from "../../options/options4";
import ChinaMap from "../chinaMap";
import CustomStyle from "../customStyle";
import MyEcharts from "../myEcharts";
import style from "./style.module.scss";
const Main = () => {
  return (
    <div className={style.main}>
      <div className={style.left}>
        <CustomStyle>
          <MyEcharts getOption={getOption1}></MyEcharts>
        </CustomStyle>
        <CustomStyle>
          <MyEcharts getOption={getOption1}></MyEcharts>
        </CustomStyle>
        <CustomStyle>
          <div className={style.flex}>
            <div className={style.span_8}>
              <MyEcharts getOption={getOption3}></MyEcharts>
            </div>
            <div className={style.span_8}>
              <MyEcharts getOption={getOption3}></MyEcharts>
            </div>
            <div className={style.span_8}>
              <MyEcharts getOption={getOption3}></MyEcharts>
            </div>
          </div>
        </CustomStyle>
      </div>
      <div className={style.middle}>
        <ChinaMap></ChinaMap>
      </div>
      <div className={style.right}>
        <CustomStyle>
          <MyEcharts getOption={getOption2}></MyEcharts>
        </CustomStyle>
        <CustomStyle>
          <MyEcharts getOption={getOption1}></MyEcharts>
        </CustomStyle>
        <CustomStyle>
          <MyEcharts getOption={getOption4}></MyEcharts>
        </CustomStyle>
      </div>
    </div>
  );
};

export default Main;
